<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>精品商城 - 购物车</title>
    <link rel="stylesheet" href="./font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="./style/toast.css">
    <link rel="stylesheet" href="./style/confirm.css">
    <style>
        /* 全局样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Inter', system-ui, sans-serif;
        }

        body {
            background-color: #F8F9FA;
            color: #212529;
            line-height: 1.6;
        }

        /* 导航栏 */
        nav {
            background-color: white;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
            position: fixed;
            width: 100%;
            z-index: 50;
            transition: all 0.3s;
            padding: 12px 0;
        }

        nav.scrolled {
            padding: 8px 0;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 16px;
        }

        .nav-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            color: #FF4D6D;
            font-size: 24px;
            font-weight: bold;
            display: flex;
            align-items: center;
        }

        .logo i {
            margin-right: 8px;
        }

        .nav-links {
            display: flex;
            list-style: none;
            gap: 24px;
        }

        .nav-links a {
            color: #495057;
            text-decoration: none;
            transition: color 0.3s;
        }

        .nav-links a:hover {
            color: #FF4D6D;
        }

        .nav-actions {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .nav-action {
            position: relative;
            color: #495057;
            cursor: pointer;
            transition: color 0.3s;
        }

        .nav-action:hover {
            color: #FF4D6D;
        }

        .nav-action i {
            font-size: 20px;
        }

        .cart-count {
            position: absolute;
            top: -8px;
            right: -8px;
            background-color: #FF4D6D;
            color: white;
            border-radius: 50%;
            width: 18px;
            height: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
        }

        /* 主要内容 */
        main {
            padding: 96px 0 64px;
        }

        .page-title {
            text-align: center;
            margin-bottom: 40px;
        }

        .page-title h1 {
            font-size: clamp(1.8rem, 5vw, 2.5rem);
            font-weight: bold;
            margin-bottom: 12px;
        }

        .page-title p {
            color: #6C757D;
        }

        /* 购物车容器 */
        .cart-container {
            background-color: white;
            border-radius: 20px;
            box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        /* 购物车为空状态 */
        .cart-empty {
            display: none;
            padding: 80px 0;
            text-align: center;
        }

        .cart-empty-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background-color: rgba(255, 77, 109, 0.1);
            color: #FF4D6D;
            margin-bottom: 24px;
        }

        .cart-empty-icon i {
            font-size: 36px;
        }

        .cart-empty h3 {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 8px;
        }

        .cart-empty p {
            color: #6C757D;
            margin-bottom: 24px;
        }

        .btn {
            background-color: #FF4D6D;
            color: white;
            padding: 12px 24px;
            border-radius: 8px;
            text-decoration: none;
            font-weight: 500;
            display: inline-block;
            transition: all 0.3s;
        }

        .btn:hover {
            background-color: #FF2248;
            transform: translateY(-2px);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

        /* 购物车有商品状态 */
        .cart-header {
            display: grid;
            grid-template-columns: 1fr 5fr 2fr 2fr 2fr 2fr;
            padding: 16px 24px;
            background-color: #F8F9FA;
            font-size: 14px;
            font-weight: 500;
            color: #495057;
        }

        .cart-items {
            display: block;
        }

        .cart-item {
            display: grid;
            grid-template-columns: 6fr 2fr 2fr 2fr 2fr;
            padding: 20px 24px;
            border-bottom: 1px solid #E9ECEF;
            align-items: center;
            transition: background-color 0.3s;
        }

        .cart-item:hover {
            background-color: #FAFAFA;
        }

        .product-info {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .product-image {
            width: 64px;
            height: 64px;
            border-radius: 8px;
            overflow: hidden;
            flex-shrink: 0;
        }

        .product-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .product-details h4 {
            font-size: 16px;
            font-weight: 500;
        }

        .product-details p {
            font-size: 14px;
            color: #6C757D;
            margin-top: 4px;
        }

        .product-price {
            text-align: start;
            font-weight: 500;
        }

        .quantity-control {
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }

        .quantity-control button {
            width: 32px;
            height: 32px;
            border: 1px solid #DEE2E6;
            background-color: #F8F9FA;
            color: #495057;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .quantity-control button:hover {
            background-color: #E9ECEF;
        }

        .quantity-control button:first-child {
            border-radius: 4px 0 0 4px;
        }

        .quantity-control button:last-child {
            border-radius: 0 4px 4px 0;
        }

        .quantity-input {
            width: 48px;
            height: 32px;
            border-top: 1px solid #DEE2E6;
            border-bottom: 1px solid #DEE2E6;
            text-align: center;
            outline: none;
        }

        .product-total {
            text-align: start;
            font-weight: 600;
            color: #FF4D6D;
        }

        .remove-item {
            text-align: center;
        }

        .remove-btn {
            background-color: transparent;
            border: none;
            color: #ADB5BD;
            cursor: pointer;
            transition: color 0.3s;
            background-color: #f3f3f3;
            height: 30px;
            width: 30px;
            border-radius: 30px;
        }

        .remove-btn:hover {
            color: #FF4D6D;
            background-color: gainsboro;
        }

        .cart-footer {
            padding: 16px 24px;
            background-color: #F8F9FA;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: 40px;
        }

        .remove-all-select {
            background-color: transparent;
            border: none;
            color: #6C757D;
            cursor: pointer;
            transition: color 0.3s;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .remove-all-select:hover {
            color: #FF4D6D;
        }

        .remove-all-btn {
            background-color: transparent;
            border: none;
            color: #6C757D;
            cursor: pointer;
            transition: color 0.3s;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .remove-all-btn:hover {
            color: #FF4D6D;
        }

        /* 购物车结算 */
        .cart-summary {
            background-color: white;
            border-radius: 20px;
            box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1);
            padding: 24px;
            margin-top: 32px;
        }

        .cart-summary h3 {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 16px;
        }

        .summary-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 12px;
        }

        .summary-total {
            display: flex;
            justify-content: space-between;
            padding-top: 16px;
            border-top: 1px solid #E9ECEF;
            margin-top: 16px;
        }

        .summary-total span:first-child {
            font-size: 18px;
            font-weight: 600;
        }

        .total-amount {
            font-size: 24px;
            font-weight: bold;
            color: #FF4D6D;
        }

        .checkout-btn {
            width: 100%;
            background-color: #FF4D6D;
            color: white;
            padding: 16px;
            border-radius: 8px;
            border: none;
            font-weight: 600;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s;
            margin-top: 24px;
        }

        .checkout-btn:hover {
            background-color: #FF2248;
            transform: translateY(-2px);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

        /* 页脚 */
        footer {
            background-color: #212529;
            color: white;
            padding: 64px 0;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 32px;
        }

        .footer-column h4 {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 16px;
        }

        .footer-column p {
            color: #ADB5BD;
            margin-bottom: 16px;
        }

        .social-links {
            display: flex;
            gap: 12px;
        }

        .social-links a {
            color: #ADB5BD;
            transition: color 0.3s;
        }

        .social-links a:hover {
            color: #FF4D6D;
        }

        .footer-links {
            list-style: none;
        }

        .footer-links li {
            margin-bottom: 8px;
        }

        .footer-links a {
            color: #ADB5BD;
            text-decoration: none;
            transition: color 0.3s;
        }

        .footer-links a:hover {
            color: #FF4D6D;
        }

        .contact-item {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 12px;
        }

        .contact-item i {
            color: #FF4D6D;
        }

        .copyright {
            text-align: center;
            color: #6C757D;
            margin-top: 48px;
            padding-top: 24px;
            border-top: 1px solid #343A40;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .nav-links {
                display: none;
            }

            .cart-header {
                display: none;
            }

            .cart-item {
                grid-template-columns: 1fr;
                gap: 16px;
            }

            .product-price,
            .product-total {
                text-align: left;
            }

            .quantity-control {
                justify-content: flex-start;
            }

            .remove-item {
                text-align: left;
            }

            .footer-grid {
                grid-template-columns: 1fr;
                gap: 48px;
            }
        }
    </style>
</head>

<body>
    <!-- 导航栏 -->
    <nav>
        <div class="container">
            <div class="nav-content">
                <a href="#" class="logo">
                    <i class="fa fa-shopping-bag"></i>精品商城
                </a>

                <ul class="nav-links">
                    <li><a href="#">首页</a></li>
                    <li><a href="#">商品分类</a></li>
                    <li><a href="#">热门推荐</a></li>
                    <li><a href="#">联系我们</a></li>
                </ul>

                <div class="nav-actions">
                    <div class="nav-action">
                        <i class="fa fa-search"></i>
                    </div>
                    <div class="nav-action">
                        <i class="fa fa-shopping-cart"></i>
                        <span class="cart-count" id="cart-count">2</span>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <main>
        <div class="container">
            <div class="page-title">
                <h1>我的购物车</h1>
                <p>检查您的商品并完成结算</p>
            </div>

            <!-- 购物车容器 -->
            <div class="cart-container">
                <!-- 购物车为空状态 -->
                <div class="cart-empty" id="cart-empty">
                    <div class="cart-empty-icon">
                        <i class="fa fa-shopping-cart"></i>
                    </div>
                    <h3>您的购物车还是空的</h3>
                    <p>添加一些商品到购物车，开始您的购物之旅吧</p>
                    <a href="#" class="btn">立即选购</a>
                </div>

                <!-- 购物车有商品状态 -->
                <div class="cart-items" id="cart-items">
                    <div class="cart-header">
                        <div class="col-checkbox">全选
                            <input type="checkbox" class="col-checkbox">
                        </div>
                        <div class="col-product">商品信息</div>
                        <div class="col-price">单价</div>
                        <div class="col-quantity">数量</div>
                        <div class="col-total">小计</div>
                    </div>

                    <!-- 购物车商品项 -->
                    <div class="cart-main"></div>

                    <div class="cart-footer">
                        <button class="remove-all-select">
                            <i class="fa fa-trash"></i>删除选中商品
                        </button>
                        <button class="remove-all-btn">
                            <i class="fa fa-trash"></i>清空购物车
                        </button>
                    </div>
                </div>
            </div>

            <!-- 购物车结算 -->
            <div class="cart-summary" id="cart-summary">
                <h3>订单摘要</h3>

                <div class="summary-item">
                    <span>商品总价</span>
                    <span id="subtotal">¥1,298</span>
                </div>
                <div class="summary-item">
                    <span>优惠折扣</span>
                    <span class="text-green-600">-¥0</span>
                </div>
                <div class="summary-item">
                    <span>运费</span>
                    <span>¥0</span>
                </div>

                <div class="summary-total">
                    <span>总计</span>
                    <span class="total-amount" id="total">¥1,248</span>
                </div>

                <button class="checkout-btn">结算</button>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer>
        <div class="container">
            <div class="footer-grid">
                <div class="footer-column">
                    <h4>精品商城</h4>
                    <p>精选全球优质商品，为您带来非凡购物体验</p>
                    <div class="social-links">
                        <a href="#" aria-label="微博"><i class="fa fa-weibo"></i></a>
                        <a href="#" aria-label="微信"><i class="fa fa-wechat"></i></a>
                        <a href="#" aria-label="Instagram"><i class="fa fa-instagram"></i></a>
                        <a href="#" aria-label="Twitter"><i class="fa fa-twitter"></i></a>
                    </div>
                </div>

                <div class="footer-column">
                    <h4>快速链接</h4>
                    <ul class="footer-links">
                        <li><a href="#">首页</a></li>
                        <li><a href="#">商品分类</a></li>
                        <li><a href="#">热门推荐</a></li>
                        <li><a href="#">关于我们</a></li>
                    </ul>
                </div>

                <div class="footer-column">
                    <h4>客户服务</h4>
                    <ul class="footer-links">
                        <li><a href="#">购物指南</a></li>
                        <li><a href="#">支付方式</a></li>
                        <li><a href="#">配送说明</a></li>
                        <li><a href="#">售后服务</a></li>
                    </ul>
                </div>

                <div class="footer-column">
                    <h4>联系我们</h4>
                    <div class="contact-item">
                        <i class="fa fa-map-marker"></i>
                        <span>北京市朝阳区建国路88号</span>
                    </div>
                    <div class="contact-item">
                        <i class="fa fa-phone"></i>
                        <span>400-123-4567</span>
                    </div>
                    <div class="contact-item">
                        <i class="fa fa-envelope"></i>
                        <span>service@example.com</span>
                    </div>
                </div>
            </div>

            <div class="copyright">
                <p>© 2025 精品商城. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <script type="module">
        import {
            getCartList,
            delCart,
            delCartSelect,
            clearCart,
            cartSelect,
            cartSelectAll,
            changeCartNum,
            cartPay
        } from './js/api.js';
        import toast from './utils/toast.js';
        import { showConfirm } from './utils/confirm.js';

        // DOM元素引用
        const doms = {
            cartMain: document.querySelector('.cart-main'),
            cartEmpty: document.getElementById('cart-empty'),
            cartItems: document.getElementById('cart-items'),
            cartSummary: document.getElementById('cart-summary'),
            subtotal: document.getElementById('subtotal'),
            total: document.getElementById('total'),
            cartCount: document.getElementById('cart-count'),
            removeAllSelect: document.querySelector('.remove-all-select'),
            removeAllBtn: document.querySelector('.remove-all-btn'),
            checkoutBtn: document.querySelector('.checkout-btn'),
            selectAllCheckbox: document.querySelector('.col-checkbox input[type="checkbox"]')
        };

        // 用户信息
        const userInfo = JSON.parse(localStorage.getItem('user'));

        // 初始化购物车
        function initCart() {
            if (!userInfo || !userInfo.id) {
                toast.error('请先登录');
                window.location.href = '/login.html';
                return;
            }

            getCartList({ id: userInfo.id })
                .then(result => {
                    renderCart(result.cart);
                    updateCartTotal();
                })
                .catch(err => {
                    toast.error(err);
                    checkEmptyCart();
                });
        }

        // 渲染购物车
        function renderCart(cartItems) {
            if (cartItems.length === 0) {
                showEmptyCart();
                return;
            }

            showCartWithItems();

            doms.cartMain.innerHTML = cartItems.map(item => `
        <div class="cart-item" data-id="${item.goods_id}">
            <div class="product-info">
                <input type="checkbox" class="selectBtn" ${item.is_select ? 'checked' : ''}>
                <div class="product-image">
                    <img src="${item.img_small_logo}" alt="${item.category}">
                </div>
                <div class="product-details">
                    <h4>${truncateText(item.title, 8)}</h4>
                    <p>${truncateText(item.title, 16)}</p>
                </div>
            </div>
            <div class="product-price">${formatMoney(item.current_price)}</div>
            <div class="quantity-control">
                <button class="decrease-btn">-</button>
                <input type="number" value="${item.cart_number}" min="1" class="quantity-input">
                <button class="increase-btn">+</button>
            </div>
            <div class="product-total">${formatMoney(item.current_price * item.cart_number)}</div>
            <div class="remove-item">
                <button class="remove-btn"><i class="fa fa-trash"></i></button>
            </div>
        </div>
    `).join('');

            doms.cartCount.textContent = cartItems.length;
            updateSelectAllStatus();
        }

        // 显示空购物车状态
        function showEmptyCart() {
            doms.cartItems.style.display = 'none';
            doms.cartEmpty.style.display = 'block';
            doms.cartSummary.style.display = 'none';
            doms.cartCount.textContent = '0';
        }

        // 显示有商品的购物车状态
        function showCartWithItems() {
            doms.cartItems.style.display = 'block';
            doms.cartEmpty.style.display = 'none';
            doms.cartSummary.style.display = 'block';
        }

        // 更新购物车总价
        function updateCartTotal() {
            const items = document.querySelectorAll('.cart-item');
            let subtotal = 0;
            let selectedItemsTotal = 0;
            let selectedItemsCount = 0;

            items.forEach(item => {
                const price = parseFloat(item.querySelector('.product-price').textContent.replace('¥', ''));
                const quantity = parseInt(item.querySelector('.quantity-input').value);
                const isSelected = item.querySelector('.selectBtn').checked;
                const total = calculatePrice(price, quantity);

                item.querySelector('.product-total').textContent = formatMoney(total);

                subtotal += total;
                if (isSelected) {
                    selectedItemsTotal += total;
                    selectedItemsCount++;
                }
            });

            doms.subtotal.textContent = formatMoney(subtotal);
            doms.total.textContent = formatMoney(subtotal);
            doms.cartCount.textContent = items.length;

            updateSelectAllStatus();
        }

        // 检查购物车是否为空
        function checkEmptyCart() {
            const items = document.querySelectorAll('.cart-item');
            if (items.length === 0) {
                showEmptyCart();
            }
        }

        // 更新"全选"复选框状态
        function updateSelectAllStatus() {
            const items = document.querySelectorAll('.cart-item');
            const selectedItems = document.querySelectorAll('.cart-item .selectBtn:checked');

            doms.selectAllCheckbox.checked = items.length > 0 && items.length === selectedItems.length;
        }

        // 格式化金额（保留两位小数）
        function formatMoney(amount) {
            return `¥${parseFloat(amount).toFixed(2)}`;
        }

        // 精确计算价格（避免浮点数问题）
        function calculatePrice(price, quantity) {
            const priceInCents = Math.round(price * 100);
            const totalInCents = priceInCents * quantity;
            return totalInCents / 100;
        }

        // 文本截断函数
        function truncateText(text, maxLength) {
            return text.length > maxLength ? text.slice(0, maxLength) + '...' : text;
        }

        // 事件监听
        function setupEventListeners() {
            // 购物车操作事件委托
            doms.cartMain.addEventListener('click', handleCartItemActions);

            // 数量输入框变化
            doms.cartMain.addEventListener('change', handleQuantityChange);

            // 全选/取消全选
            doms.selectAllCheckbox.addEventListener('change', handleSelectAll);

            // 清空购物车
            doms.removeAllBtn.addEventListener('click', handleRemoveAllItems);

            // 删除选中商品
            doms.removeAllSelect.addEventListener('click', handleRemoveSelectedItems);

            // 结算按钮
            doms.checkoutBtn.addEventListener('click', handleCheckout);

            // 导航栏滚动效果
            window.addEventListener('scroll', () => {
                const nav = document.querySelector('nav');
                nav.classList.toggle('scrolled', window.scrollY > 50);
            });
        }

        // 处理购物车项的各种操作
        function handleCartItemActions(e) {
            const cartItem = e.target.closest('.cart-item');
            if (!cartItem) return;

            const goodsId = cartItem.dataset.id;

            // 删除商品
            if (e.target.closest('.remove-btn')) {
                handleRemoveItem(goodsId, cartItem);
            }

            // 减少数量
            if (e.target.classList.contains('decrease-btn')) {
                const input = e.target.nextElementSibling;
                handleQuantityAdjust(goodsId, -1, input);
            }

            // 增加数量
            if (e.target.classList.contains('increase-btn')) {
                const input = e.target.previousElementSibling;
                handleQuantityAdjust(goodsId, 1, input);
            }
        }

        // 处理数量输入框变化
        function handleQuantityChange(e) {
            if (e.target.classList.contains('quantity-input')) {
                const cartItem = e.target.closest('.cart-item');
                const goodsId = cartItem.dataset.id;
                let newValue = parseInt(e.target.value);

                if (isNaN(newValue) || newValue < 1) {
                    e.target.value = 1;
                    newValue = 1;
                }

                updateCartItemQuantity(goodsId, newValue);
            }

            // 处理商品选择状态变化
            if (e.target.classList.contains('selectBtn')) {
                const cartItem = e.target.closest('.cart-item');
                const goodsId = cartItem.dataset.id;
                handleSelectItem(goodsId, e.target.checked);
            }
        }

        // 处理全选/取消全选
        function handleSelectAll(e) {
            const isSelected = e.target.checked;
            const type = isSelected ? 1 : 0; // 1表示全选，0表示取消全选

            cartSelectAll({
                id: userInfo.id,
                type: type
            }).then(result => {
                toast.success(isSelected ? '已全选所有商品' : '已取消全选');
                updateAllItemsSelection(isSelected);
                updateCartTotal();
            }).catch(err => {
                toast.error(isSelected ? '全选失败' : '取消全选失败');
                e.target.checked = !isSelected;
            });
        }

        // 更新所有商品的选择状态
        function updateAllItemsSelection(isSelected) {
            document.querySelectorAll('.cart-item .selectBtn').forEach(checkbox => {
                checkbox.checked = isSelected;
            });
        }

        // 处理删除商品
        function handleRemoveItem(goodsId, cartItem) {
            showConfirm({
                title: '删除确认',
                message: '确定要删除此项吗？此操作不可撤销。',
                onConfirm: () => {
                    delCart({ id: userInfo.id, goodsId })
                        .then(result => {
                            toast.success(result.message);
                            animateRemoveItem(cartItem);
                        })
                        .catch(toast.error);
                }
            });
        }

        // 删除商品动画
        function animateRemoveItem(cartItem) {
            cartItem.style.opacity = '0';
            cartItem.style.transform = 'translateX(50px)';
            cartItem.style.transition = 'all 0.3s ease-out';

            setTimeout(() => {
                cartItem.remove();
                updateCartTotal();
                checkEmptyCart();
            }, 300);
        }

        // 处理商品选择
        function handleSelectItem(goodsId, isSelected) {
            cartSelect({
                id: userInfo.id,
                goodsId,
                is_select: isSelected ? 1 : 0
            }).then(result => {
                updateCartTotal();
            }).catch(err => {
                toast.error(err);
                const checkbox = document.querySelector(`.cart-item[data-id="${goodsId}"] .selectBtn`);
                if (checkbox) checkbox.checked = !isSelected;
            });
        }

        // 处理数量调整
        function handleQuantityAdjust(goodsId, change, inputElement) {
            let newValue = parseInt(inputElement.value) + change;
            if (newValue < 1) newValue = 1;

            inputElement.value = newValue;
            updateCartItemQuantity(goodsId, newValue);
        }

        // 更新购物车商品数量
        function updateCartItemQuantity(goodsId, quantity) {
            changeCartNum({
                id: userInfo.id,
                goodsId,
                number: quantity
            }).then(result => {
                updateCartTotal();
            }).catch(err => {
                toast.error(err);
                const input = document.querySelector(`.cart-item[data-id="${goodsId}"] .quantity-input`);
                if (input) input.value = input.defaultValue;
            });
        }

        // 处理清空购物车
        function handleRemoveAllItems() {
            showConfirm({
                title: '清空购物车',
                message: '确定要清空购物车吗？此操作不可撤销。',
                onConfirm: () => {
                    clearCart({ id: userInfo.id })
                        .then(result => {
                            toast.success(result.message);
                            showEmptyCart();
                        })
                        .catch(toast.error);
                }
            });
        }

        // 处理删除选中商品
        function handleRemoveSelectedItems() {
            const selectedItems = document.querySelectorAll('.cart-item .selectBtn:checked');
            if (selectedItems.length === 0) {
                toast.info('请先选择要删除的商品');
                return;
            }

            showConfirm({
                title: '删除选中商品',
                message: `确定要删除选中的${selectedItems.length}件商品吗？`,
                onConfirm: () => {
                    delCartSelect({ id: userInfo.id })
                        .then(result => {
                            toast.success(result.message);
                            initCart();
                        })
                        .catch(toast.error);
                }
            });
        }

        // 处理结算
        function handleCheckout() {
            const selectedItems = document.querySelectorAll('.cart-item .selectBtn:checked');
            if (selectedItems.length === 0) {
                toast.info('请先选择要结算的商品');
                return;
            }

            showConfirm({
                title: '确认结算',
                message: `确定要结算${selectedItems.length}件商品吗？`,
                onConfirm: () => {
                    cartPay({ id: userInfo.id })
                        .then(result => {
                            toast.success(result.message);
                            initCart();
                        })
                        .catch(toast.error);
                }
            });
        }

        // 初始化页面
        document.addEventListener('DOMContentLoaded', () => {
            setupEventListeners();
            initCart();
        });
    </script>
</body>

</html>